<script type="text/javascript" src="{MODULE_URL}public/mobile/js/jquery-1.11.3.min.js?v=4.8"></script>
<div style="height: 50px"></div>
<style>
.new_bottom_menu3 li.mid a:before { /*content:''; width:64px; height: 64px;  position:absolute; top:-6px; left:-5px; border-radius: 36px; z-index:1;*/ }
.new_bottom_menu3 li.mid a { /*box-shadow: 0 -1px 1px #ccc;*/position: absolute;left: 0;right: 0;margin: 0 auto;width: 64px;height: 64px;border: 5px solid #fff;top: -13px;	border-radius: 35px;	background: url({OSSURL}public/mobile/img/bottom_menu_icon_add.png) no-repeat center;background-size: 20px;background-color: #33bd61;z-index: 3;}
.new_bottom_menu3 li:nth-child(2) a {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon2_noSelect.png);}
.new_bottom_menu3 li:nth-child(1) a {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon1_noSelect.png);}
.new_bottom_menu3 li:nth-child(2) a {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon2_noSelect.png);}
.new_bottom_menu3 li:nth-child(4) a {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon3_noSelect.png);}
.new_bottom_menu3 li:nth-child(5) a { background-image: url({OSSURL}public/mobile/img/bottom_menu_icon4_noSelect.png);}
.new_bottom_menu3 li:nth-child(1) a.act {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon1_Select.png);}
.new_bottom_menu3 li:nth-child(2) a.act { background-image: url({OSSURL}public/mobile/img/bottom_menu_icon2_Select.png);}
.new_bottom_menu3 li:nth-child(4) a.act {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon3_Select.png);}
.new_bottom_menu3 li:nth-child(5) a.act {background-image: url({OSSURL}public/mobile/img/bottom_menu_icon4_Select.png);}
.new_bottom_menu3 li.mid a .plus_icon {z-index: 6;width: 64px;height: 64px;box-sizing: border-box;border: 5px solid #fff;border-radius: 35px;background: url({OSSURL}public/mobile/img/bottom_menu_icon_add.png) no-repeat center;background-size: 20px;background-color: #06c1ae;position: absolute;top: 0px;left: 0px;}
.new_bottom_menu3{height: 50px;width: 100%;background-color: #fff;display: box;display: -webkit-box;position: fixed;bottom: 0;left: 0;/*border-top: 1px solid #ccc;*/box-shadow: 0 0 5px #e7e7e9;    -moz-box-shadow: 0 0 5px #e7e7e9;-webkit-box-shadow: 0 0 5px #e7e7e9;z-index: 4;}
.new_bottom_menu3 li.menu_li{-webkit-box-flex: 1;width: 1px;height: 50px;}
.new_bottom_menu3 li.mid{width: 74px;position: relative;background-color: #fff;border-radius: 40px;box-sizing: border-box;}
.new_bottom_menu3 li a{width: 100%;height: 100%;box-sizing: border-box;padding: 30px 0 5px;text-align: center;font-size: 12px;color: #c1c1c1;background-size: auto 20px;background-position: center 7px; background-repeat: no-repeat;}
.new_bottom_menu3 li.mid a{ /*box-shadow: 0 -1px 1px #ccc;*/border-top: 1px solid #ccc;border-radius: 36px;position: absolute;left: 0;right: 0; margin: 0 auto;width: 64px;height: 64px;top: -13px;        z-index: 3;}
.new_bottom_menu3 li.mid a:before{ /*content:''; width:64px; height: 64px;  position:absolute; top:-6px; left:-5px; border-radius: 36px; z-index:1;*/}
.new_bottom_menu3 li.mid_master{width: 74px;position: relative;background-color: #fff;border-radius: 40px;box-sizing: border-box;}
.new_bottom_menu3 li.mid_master a{ /*box-shadow: 0 -1px 1px #ccc;*/ position: absolute;left: 0;right: 0;margin: 0 auto;width: 64px;height: 64px;border: 5px solid #fff;top: -13px;            border-radius: 35px; background: url({OSSURL}public/mobile/img/bottom_menu_icon_add.png) no-repeat center;background-size: 20px;background-color: #30C6E1;z-index: 3;}
.new_bottom_menu3 li.mid_master a:before{content: '';width: 64px;height: 64px;border-top: 1px solid #ccc;position: absolute;top: -6px;left: -5px;border-radius: 36px;z-index: 1;}
.new_bottom_menu3 li a.act{color: #06c1ae;}
.rote_roll{z-index: 9999999;-webkit-animation-name: reverseRotataZ;animation-name: reverseRotataZ;-webkit-animation-duration: 0.8s;animation-duration: 0.8s;-webkit-animation-fill-mode: both; animation-fill-mode: both;}
#menu{transition: transform .3s; -webkit-transition: -webkit-transform .3s;-webkit-transition: transform .3s;touch-action: none;-webkit-user-select: none;}
.circle_menu_div{display: none;width: 90%;position: fixed;left: 0;right: 0;margin-left: auto;margin-right: auto;z-index: 3;}
@-webkit-keyframes circle_menu_roll_keyframes{ 0% {-webkit-transform: translate3d(0px, 0px, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform: translate3d(0px, 0px, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}100%{-webkit-transform: translate3d(0px, 0px, 0px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: translate3d(0px, 0px, 0px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}}
.circle_menu_roll{-webkit-animation-name: circle_menu_roll_keyframes;animation-name: circle_menu_roll_keyframes; -webkit-animation-duration: 0.8s;animation-duration: 0.8s; -webkit-animation-fill-mode: both;animation-fill-mode: both;}
.new_info_tips_3{position: relative;width: 60px;margin: 0 auto;}
.new_info_tips_3:before{ position: absolute;right: 10px; top: -26px; width: 10px; height: 10px; border-radius: 50%; background-color: #e60012;  content: "";}
.new_info_tips_4{position: relative;margin: 0 auto;}
.new_info_tips_4:before{ position: absolute;right: 10px; width: 10px; height: 10px; border-radius: 50%; background-color: #e60012;  content: "";}
ul li a {text-decoration: none;display: block;height: 100%;color: #333333;}
@-webkit-keyframes bounceOutDown{20%{-webkit-transform: translate3d(0, 10px, 0);transform: translate3d(0, 10px, 0);} 40%, 45% {opacity: 1; -webkit-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);} 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}
}
.bounceOutDown{-webkit-animation-name: bounceInUp;animation-name: bounceInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-name: bounceOutDown; animation-name: ounceOutDown;}
@-webkit-keyframes reverseRotataZ{ 0% { -webkit-transform: rotateZ(0deg);}100%{ -webkit-transform: rotateZ(405deg); }}
</style>
<ul class="new_bottom_menu3">
    <li class="menu_li">
        <a href="{php echo $this->createMobileUrl('detail', array('schoolid' => $schoolid), true)}" {if $act =='sy'}class=act{/if}>
            <div>校园</div>
        </a>
    </li>
    <li class="menu_li">
        <a href="{php echo $this->createMobileUrl('sbjq', array('schoolid' => $schoolid), true)}" {if $act =='bjq'}class=act{/if}>
            {if $_SESSION['user']}<div class="new_info_tips_3"></div>{/if}
			<div>班级圈</div>
        </a>
    </li>
    <li class="mid">
        <a>
            <div class="plus_icon"></div>
        </a>
    </li>
    <li class="menu_li">	
        <a href="{php echo $this->createMobileUrl('callbook', array('schoolid' => $schoolid), true)}" {if $act =='tx'}class=act{/if}>
		    <div>通讯录</div>
        </a>
    </li>
    <li class="menu_li">
        <a href="{php echo $this->createMobileUrl('user', array('schoolid' => $schoolid), true)}" {if $act =='wd'}class=act{/if}>
            {if $unread == 1}<div class="new_info_tips_3"></div>{/if}
			<div>我的</div>
        </a>
    </li>
</ul>
<div class="circle_menu_div" id="circle_menu_div">
<svg id="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 560 560" style="transition: transform .3s; -webkit-transition: -webkit-transform .3s; -webkit-transition: transform .3s; transform-origin: 50% 50% 0px; -webkit-transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px) rotate(-180deg); -webkit-transform: translate3d(0px, 0px, 0px) rotate(-180deg); touch-action: none; -webkit-user-select: none;">
<style>
#menu {display: block;margin: 0 auto;}
a {cursor: pointer;outline: none;}
.item .sector {transition: all .1s linear;fill: #EAEAEA;stroke: none;}
.item:nth-child(2) .sector {transition: all .1s linear;	fill: #F6F4F4;stroke: none;	}
.item:nth-child(3) .sector {transition: all .1s linear;	fill: #F6F4F4;stroke: none;	}
.item:nth-child(4) .sector {transition: all .1s linear;	fill: #EAEAEA;stroke: none;	}
.item:hover .sector, .item:focus .sector {fill: #30c6e1;}
.menu-trigger:hover, .menu-trigger:focus {cursor: pointer;}
.menu-trigger {fill: #EA2A55;pointer-events: auto;}
symbol {overflow: visible;}
.cls-1{	fill: #e1e1e1;}
.cls-1, .cls-2{	fill-rule: evenodd;	}
.cls-2{	fill: #eeeeee;}
.cls-3, .cls-4	{font-size: 18px;color: #333;}
.cls-4	{fill: #333;text-anchor: middle;font-family: "SimHei";}
</style>
	<g id="itemsContainer">
		<a class="item" id="item-1" role="link" tabindex="0" xlink:href="{php echo $this->createMobileUrl('xsqj', array('schoolid' => $schoolid), true)}" xlink:title=" " style="" data-svg-origin="280 280">
			<path fill="#EAEAEA" d="M100.571,61.367C52.941,98.418,17.186,150.016,0,209.5h124.992c12.599-23.92,30.639-44.525,52.469-60.18
			L100.571,61.367z" class="sector" />
				<text x="80.031" y="190" class="cls-3">
					<tspan class="cls-4">请假</tspan>
				</text>
			<g xmlns="http://www.w3.org/2000/svg">
				<path style="fill:none;stroke:#E6507B;stroke-width:2.5;stroke-miterlimit:10;" d="M98.516,143.179v16.558     c0,2.584-2.095,4.679-4.679,4.679H70.441c-2.584,0-4.679-2.095-4.679-4.679v-23.396c0-2.584,2.095-4.679,4.679-4.679h17.212" />
				<line style="fill:none;stroke:#E6507B;stroke-width:2.5;stroke-miterlimit:10;" x1="99.234" y1="131.248" x2="75.783" y2="155.368" />
			</g>
		</a>
		<a class="item" id="item-2" role="link" tabindex="0" xlink:href="{php echo $this->createMobileUrl('slylist', array('schoolid' => $schoolid), true)}" xlink:title=" " style="" data-svg-origin="280 280">
			<path fill="#F6F4F4" d="M100.572,61.367l76.89,87.953C205.823,128.98,240.583,117,278.148,117V0.5
			C211.216,0.5,149.602,23.226,100.572,61.367z" class="sector" />
				<text x="210.031" y="110" class="cls-3">
					<tspan class="cls-4">留言</tspan>
				</text>
			<g xmlns="http://www.w3.org/2000/svg">
				<path style="fill:none;stroke:#F26D5F;stroke-width:2.5;stroke-miterlimit:10;" d="M211.023,80.001     C211.023,80.001,211.023,80.001,211.023,80.001c-0.771,0-1.556-0.257-2.334-0.764l-8.904-5.987h-5.249     c-2.244,0-4.07-2.152-4.07-4.798V56.614c0-2.646,1.826-4.798,4.07-4.798h5.249l8.887-5.976c0.796-0.518,1.581-0.775,2.351-0.775     c1.804,0,3.625,1.513,3.625,4.893v25.151c0,1.34-0.297,2.499-0.859,3.349C213.131,79.453,212.149,80.001,211.023,80.001z" />
				<g>
					<path style="fill:none;stroke:#F26D5F;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="      M223.426,53.116c0,0,6.167,10.333,0,19.5" />
					<path style="fill:none;stroke:#F26D5F;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="      M227.76,48.616c0,0,7.167,13.135,0,27.833" />
					<path style="fill:none;stroke:#F26D5F;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="      M220.272,57.7c0,0,3.125,5,0,10.625" />
				</g>
			</g>

		</a>
		<a class="item" id="item-3" role="link" tabindex="0" xlink:href="{php echo $this->createMobileUrl('sxcfb', array('schoolid' => $schoolid), true)}" xlink:title=" " style="" data-svg-origin="280 280">
			<path fill="#F6F4F4" d="M455.724,61.367c47.63,37.051,83.386,88.649,100.571,148.133H431.303
			c-12.599-23.92-30.639-44.525-52.469-60.18L455.724,61.367z" class="sector" />
				<text x="475" y="190" class="cls-3">
					<tspan class="cls-4">传照片</tspan>
				</text>
			<g xmlns="http://www.w3.org/2000/svg">
				<path style="fill:none;stroke:#5BB4DA;stroke-width:2.5;stroke-miterlimit:10;" d="M489.689,160.018     c0,2.584-2.095,4.679-4.679,4.679h-23.396c-2.584,0-4.679-2.095-4.679-4.679v-23.396c0-2.584,2.095-4.679,4.679-4.679h23.396     c2.584,0,4.679,2.095,4.679,4.679V160.018z" />

				<line style="fill:none;stroke:#5BB4DA;stroke-width:2.5;stroke-miterlimit:10;" x1="464.939" y1="131.942" x2="464.939" y2="164.697" />
			</g>
		</a>
		<a class="item" id="item-4" role="link" tabindex="0" xlink:href="{php echo $this->createMobileUrl('sbjqfabu', array('schoolid' => $schoolid), true)}" xlink:title=" " style="" data-svg-origin="280 280">
			<path fill="#EAEAEA" d="M455.723,61.367l-76.89,87.953C350.472,128.98,315.712,117,278.147,117V0.5
			C345.078,0.5,406.692,23.226,455.723,61.367z" class="sector" />
				<text x="345.031" y="110" class="cls-3">
					<tspan class="cls-4">发动态</tspan>
				</text>
			<path xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:#35B87F;stroke-width:2.5;stroke-miterlimit:10;" d="M364.091,53.401    c-0.517-3.296-2.334-5.911-5.401-7.771c-1.762-1.069-3.749-1.643-5.747-1.659c-2.551-0.02-4.978,0.895-6.834,2.576    c-0.575,0.521-1.101,1.091-1.609,1.646c-1.549-1.919-3.139-3.112-4.987-3.744c-3.245-1.109-6.487-0.716-9.48,1.15    c-3.557,2.217-5.362,5.382-5.366,9.407c-0.002,2.37,0.769,4.625,2.358,6.893c1.707,2.437,3.81,4.921,6.62,7.817    c1.891,1.95,3.851,3.889,5.745,5.765l1.849,1.833c0.165,0.164,0.333,0.326,0.502,0.487l0.208,0.197    c0.394,0.333,1.217,0.894,2.3,0.902c0.897,0.007,1.75-0.354,2.544-1.079c3.265-3.027,6.743-6.315,10.058-9.852    c1.716-1.832,3.682-3.986,5.287-6.382C363.879,58.991,364.535,56.237,364.091,53.401z" />
		</a>
	</g>

</svg>
</div>
<script>
	if ($('.circle_menu_div').length > 0) {
		var circle_menu_div_width = -$('.circle_menu_div').width() * 5 / 8 + 50;
		$('.circle_menu_div').css({ 'bottom': circle_menu_div_width + 'px', 'height': $('.circle_menu_div').width() + 'px' });
	}

	//底部菜单 加号弹出菜单层
	$(function () {
		$('.mid a .plus_icon').on('click', function () {
			if ($(this).hasClass('rote_roll')) {
				$('#menu').attr('style', 'transition: transform .3s; -webkit-transition: -webkit-transform .3s; -webkit-transition: transform .3s; transform-origin: 50% 50% 0px; -webkit-transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px) rotate(-180deg); -webkit-transform: translate3d(0px, 0px, 0px) rotate(-180deg); touch-action: none; -webkit-user-select: none;');
				$(this).removeClass("rote_roll");
				window.setTimeout(function () {
					$('.circle_menu_div').hide();
				}, 500);
			} else {
				$('.circle_menu_div').show();
				$(this).addClass("rote_roll");
				window.setTimeout(function () {
					$('#menu').attr('style', 'transition: transform .3s; -webkit-transition: -webkit-transform .3s; -webkit-transition: transform .3s; transform-origin: 50% 50% 0px; -webkit-transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px) rotate(0deg); -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg); touch-action: none; -webkit-user-select: none;');
				}, 100);
			}
		});
	});
</script>